<template>
  <div class="all-table">
    <p>all sites</p>
    <dynTable
      ref="dynTable"
      :loading="false"
      :table-data="allSite"
      :table-columns="tableColumns"
    />
    <div class="more" @click="doMore">more...</div>
    <div v-for="i in binForm.filter(ele=>ele.siteId!='-1')" :key="i.siteId" class="item-table">
      <p>site {{ i.siteId }}</p>
      <dynTable
        ref="dynTable"
        :loading="false"
        :table-data="i.binsList"
        :table-columns="tableColumns"
      />
    </div>
    <el-dialog
      :visible.sync="innerVisible"
      :close-on-click-modal="false"
      width="44%"
      title="bin info"
      append-to-body>
      <dynTable
        ref="dynTable"
        :loading="false"
        :table-data="tableData"
        :table-columns="tableColumns"
      />
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        @pagination="getList"
      />
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'BinInfoTable',
  props: {
    binForm: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      tableData: [],
      tableColumns: [
        { prop: 'binNo', label: 'Bin NO' },
        { prop: 'binType', label: 'Type', templete: (_scope) => {
          if (_scope.binType) {
            return <span>Pass</span>
          } else {
            return <span>Fail</span>
          }
        } },
        { prop: 'binQty', label: 'Bin Qty' },
        { prop: 'binRate', label: 'Bin ratc' },
        { prop: 'binItem', label: 'Bin item' }
      ],
      options: {
        stripe: true,
        align: 'center',
        showIndex: false,
        selection: false // 时候否展示选中框
      }, // 配置项
      operation: {
        label: '',
        isShow: false
      }, // 操作项
      formInline: {},
      innerVisible: false,
      total: 0,
      listQuery: {
        page: 1,
        size: 10
      }
    }
  },
  computed: {
    allSite() {
      const list = []
      const arr = this.binForm.filter(ele => ele.siteId === '-1') || []
      arr.forEach(ele => {
        list.push(...ele.binsList)
      })
      return list
    }
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    doMore() {
      this.innerVisible = true
    },
    getList(val) {

    }
  }
}
</script>
<style lang='scss' scoped>
::v-deep .el-table th, .el-table td{
  padding: 0;
  font-size:12px
}
.more{
  width: 100%;
  padding: 5px 0;
  text-align: center;
  color: #3a87ad;
  cursor: pointer;
}
</style>
